<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="http:////at.alicdn.com/t/c/font_3619735_xxxtl5nt8sr.css">
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #EDF0F3;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      /* width: 100%; */
      height: 550px;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .swiper {
      --swiper-theme-color: #ff6600;
      --swiper-pagination-color: #ffffff;
      /* 两种都可以 */
    }

    .swiper-pagination-bullet-active {
      width: 15px;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <div class="AD_img">
    <img src="./img/10004.jpg" alt="">
    <div class="off iconfont">&#xe624;</div>
  </div>
  <!-- 头部导航模块 -->
  <div class="HeadNavModule">

    <div class="HeadNavModule_box">
      <div class="HeadNavModule_box_left">
        <ul>
          <li><a href="#">首页</a> </li>
          <li><a href="#">华为官网</a></li>
          <li><a href="#">V码(优购码)</a></li>
          <li><a href="#">企业购</a></li>
          <li><a href="#">Select Region</a></li>
          <li><a href="#">更多精彩</a>
            <div class="left_more">
              <dl>
                <dt>HarmonyOS</dt>
                <dt>应用市场</dt>
                <dt>华为终端云空间</dt>
                <dt>开发者联盟</dt>
              </dl>
            </div>
          </li>
        </ul>
      </div>
      <div class="HeadNavModule_box_right">
        <ul class="right">
          <li><a href="#">请登录</a><a href="#">注册</a></li>
          <li class="net_nav"><a href="#">我的订单</a></li>
          <li class="service"><a href="#">客服</a><span></span>
            <div class="customer_service">
              <dl>
                <dt>服务中心</dt>
                <dt>联系客服</dt>
              </dl>
            </div>
          </li>
          <li class="net_nav"><a href="#">网站导航</a><span></span>
            <div class="Web_class">
              <div class="Web_class_logo">
                <p></p>
                <h4>商城首页</h4>
              </div>
              <div class="content">
                <dl>
                  <dt>
                    <h3>频道</h3>
                    <ul>
                      <li>华为专区</li>
                      <li>企业购</li>
                      <li>教育优惠</li>
                      <li>HarmonyOs</li>
                    </ul>
                  </dt>
                  <dt>
                    <h3>产品</h3>
                    <ul>
                      <li>手机</li>
                      <li>笔记本</li>
                      <li>平饭</li>
                      <li>智能穿戴</li>
                      <li>智能家居</li>
                      <li>智慧屏</li>
                      <li>耳机音箱</li>
                      <li>热销配件</li>
                      <li>生态产品</li>
                      <li>增值服务</li>
                    </ul>
                  </dt>
                  <dt>
                    <h3>增值服务</h3>
                    <ul>
                      <li>以旧换新</li>
                      <li> 补购保障</li>
                      <li> 一口价换电池 </li>
                      <li> 音频延保</li>
                      <li> 穿戴延保</li>
                      <li> 智慧屏全质保</li>
                      <li> 活动公告</li>


                    </ul>
                  </dt>
                  <dt>
                    <h3>会员</h3>
                    <ul>
                      <li>会员频道</li>
                    </ul>
                  </dt>
                </dl>
              </div>
            </div>
          </li>
          <li><a href="#">手机版</a><span></span>
            <div class="app">
              <dl>
                <dt>
                  <img src="./img/10001.png" alt="">
                  <div class="title_shop">
                    <h2>华为商城APP</h2>
                    <p>新人专享好礼<br>
                      最高5000积分</p>
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>

                  </div>
                </dt>
                <dt>
                  <img src="./img/10003.jpg" alt="">
                  <div class="title_wananchi">
                    <h2>华为商城公众号</h2>
                    <p>微信扫二扫</p>
                    <ul>
                      <li></li>
                    </ul>

                  </div>
                </dt>
                <dt>
                  <img src="./img/10002.png" alt="">
                  <div class="title_Applets">
                    <h2>微信小程序</h2>
                    <ul>
                      <li></li>
                    </ul>
                  </div>
                </dt>
              </dl>

            </div>
          </li>

        </ul>
      </div>
      <div class="HeadNavModule_box_ShoppingCar">
        <div class="shopingcar">
          <span></span>
          <a href="#">购物车(0)</a>
        </div>

        <div class="shoping_content">
          <img src="./img/10074.svg" alt="">
          <span>你的购物车是空的，赶紧选购吧～</span>
        </div>

      </div>
    </div>

  </div>

  <!-- logo 导航模块 -->
  <div class="LogoNavModule">
    <div class="Search_module w">


      <img src="https://res.vmallres.com/portal/1.22.7.300/h5/images/logo_app.png" alt="">

      <ul>
        <li>华为专区</li>
        <li>鸿蒙智联</li>
        <li>莫塞尔</li>
        <li>华为智选</li>
        <li>HarmonyOS</li>
        <li>特惠企采</li>
        <li>教育购</li>
      </ul>

      <div class="shou">
        <span class="iconfont icon_shoushuo">&#xeafe;</span>
      </div>


    </div>
    <div class="Search_module_New">
      <span class="iconfont">&#xeafe;</span>
      <input type="text" placeholder="搜索商品">
      <span class="iconfont Search_New">&#xe624;</span>
      <div class="recommend">
        <div class="recommend_title">
          <h2>搜索发现</h2>
          <span class="iconfont">&#xe66d;</span>
        </div>
        <div class="recommend_conent">
          <ul>
            <li>双11爆品直降3000元</li>
            <li>PocketS到手价5988起</li>
            <li>存储卡</li>
            <li>mate50路由器</li>
            <li>p50pro</li>
            <li>保时捷</li>
            <li>p50 pocket</li>
            <li>耳机蓝牙</li>
            <li> 耳机蓝牙</li>
          </ul>



        </div>
      </div>
    </div>
  </div>

  <!-- 轮播图模块 -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/10006.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/10007.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/10008.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/10009.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/10010.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/10011.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/10012.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/10013.jpg" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="Carousel_module_nav w">
      <ul>
        <li><span>手机</span><span class="iconfont"></span></li>
        <li><span>电脑</span><span class="iconfont"></span></li>
        <li><span>平板</span><span class="iconfont"></span></li>
        <li><span>智慧屏</span><span class="iconfont"></span></li>
        <li><span>穿戴</span><span class="iconfont"></span></li>
        <li><span>耳机音箱</span><span class="iconfont"></span></li>
        <li><span>门锁路由</span><span class="iconfont"></span></li>
        <li><span>出行车品</span><span class="iconfont"></span></li>
        <li><span>配件</span><span class="iconfont"></span></li>
        <li><span>生态产品</span><span class="iconfont"></span></li>
        <li><span>美食酒饮</span><span class="iconfont"></span></li>
        <li><span>增值服务/企业商用</span><span class="iconfont"></span></li>
      </ul>
    </div>
    <div class="menu_conent">
      <ul class="sj">
        <!-- <li>
          <img src="./img/sj/s1.png" alt="">
          <div class="Trade_name">shouji jfkdjfk</div>
        </li> -->
      </ul>
      <ul class="dn"></ul>
      <ul class="pb"></ul>
      <ul class="zhp"></ul>
      <ul class="cd"></ul>
      <ul class="ej"></ul>
      <ul class="ms"></ul>
      <ul class="cx"></ul>
      <ul class="pj"></ul>
      <ul class="st"></ul>
      <ul class="jy"></ul>
      <ul class="zz"></ul>
    </div>
  </div>


  <!-- 分类模块 -->
  <div class="Classification_module w">
    <ul>
      <li><img src="./img/10014.webp" alt=""><span>智能办公</span></li>
      <li><img src="./img/10015.webp" alt=""><span>智能家居</span></li>
      <li><img src="./img/10016.webp" alt=""><span>AITO汽车</span></li>
      <li><img src="./img/10017.webp" alt=""><span>影音娱乐</span></li>
      <li><img src="./img/10018.webp" alt=""><span>运动健康</span></li>
      <li><img src="./img/10019.webp" alt=""><span>会员频道</span></li>
    </ul>

  </div>
  <!-- 分类模块 -->

  <!-- 推荐模块 -->
  <div class="Recommend w">
    <div class="Recommend_title shopping_con_title">
      <h3>甄选推荐</h3>
      <span>更多<span class="iconfont">&#xe63c;</span></span>
    </div>
    <div class="Recommend_body shopping_con_body">
      <ul>
        <!-- <li>
          <div class="imgbox">
            <img src="./img/10020.webp" alt="">
          </div>
          <div class="conentbox">
            <span class="title_name"><span>新品</span>
              <h4>HUAWEI P50</h4>
            </span>
            <span class="profile">直屏影像旗舰| 原色双影像单元</span>
            <span class="Price">¥3758起</span>
            <span class="characteristic"><span>限时优惠730|现货速发</span></span>
          </div>
        </li>
        <li></li>
        <li></li>
        <li></li> -->
      </ul>
    </div>
  </div>

  <!-- 手机模块 -->
  <div class="phone_module w">
    <div class="phone_module_title shopping_con_title">
      <h3>手机专区</h3>
      <span>更多<span class="iconfont">&#xe63c;</span></span>
    </div>
    <div class="phone_module_body shopping_con_body">
      <ul>

      </ul>
    </div>
  </div>

  <!-- 电脑专区 -->
  <div class="Computer_zone w">
    <div class="Computer_zone_title shopping_con_title">
      <h3>平板专区</h3>
      <span>更多<span class="iconfont">&#xe63c;</span></span>
    </div>
    <div class="Computer_zone_body shopping_con_body">
      <ul>

      </ul>
    </div>
  </div>

  <!-- 平板专区 -->
  <div class="Flat w">
    <div class="Flat_title shopping_con_title">
      <h3>手机专区</h3>
      <span>更多<span class="iconfont">&#xe63c;</span></span>
    </div>
    <div class="Flat_body shopping_con_body">
      <ul>

      </ul>
    </div>
  </div>


  <!-- 穿戴专区 -->
  <div class="Wearing_area w">
    <div class="Wearing_area_title shopping_con_title">
      <h3>穿戴专区</h3>
      <span>更多<span class="iconfont">&#xe63c;</span></span>
    </div>
    <div class="Wearing_area_body shopping_con_body">
      <ul>

      </ul>
    </div>
  </div>
  <!-- 精选爆款 -->
  <div class="Selected w">
    <div class="Selected_title shopping_con_title">
      <h3>精选爆款</h3>
      <span>更多<span class="iconfont">&#xe63c;</span></span>
    </div>
    <div class="Selected_body shopping_con_body">
      <ul>

      </ul>
    </div>
  </div>
  <!-- 限时秒杀 -->
  <div class="Instant_kill w">
    <div class="Instant_kill_top shopping_con_title">
      <h3>限时秒杀</h3>
    </div>

    <div class="Instant_kill_body shopping_con_body">
      <div class="time">
        <img src="./img/10059.png" alt="">
        <span class="time_0">00:00场</span>
        <span class="time_text">距离结束还有</span>
        <div class="countDown">
          <span class="h">00</span>:
          <span class="m">00</span>:
          <span class="s">00</span>
        </div>
      </div>
      <ul></ul>
    </div>

  </div>
  <!-- 限时秒杀 -->

  <!-- 华为智选 -->
  <div class="intelligence w">
    <div class="intelligence_title shopping_con_title">
      <h3>华为智选</h3>
      <span>更多<span class="iconfont">&#xe63c;</span></span>
    </div>
    <div class="intelligence_body shopping_con_body">
      <ul>

      </ul>
    </div>
  </div>


  <!-- 全局定位 -->

  <div class="quanjudignwee">
    <ul>
      <li><span class="iconfont">&#xe752;</span><span>购物车</span></li>
      <li><span class="iconfont">&#xe60f;</span><span>在线客服</span></li>
      <li><span class="iconfont">&#xe601;</span><span>自助服务</span></li>
      <li class="back_top"><span class="iconfont">&#xe66c;</span><span>返回顶部</span></li>
    </ul>

  </div>
  <!-- 全局定位 -->

  <footer>
    <div class="foot_conent w">
      <h3><img src="./img/foot1.webp" alt=""><span>百强企业 品质保证</span></h3>
      <h3><img src="./img/foot2.webp" alt=""><span>7天退货 15天换货</span></h3>
      <h3><img src="./img/foot3.webp" alt=""><span>48元起免运费</span></h3>
      <h3><img src="./img/foot4.webp" alt=""><span>2000家服务店 全国联保</span></h3>
    </div>
    <div class="foot_service w">
      <div class="foot_service_left">
        <dl>
          <dt>购物指南</dt>
          <dd>
            <ul>
              <li>免息分期</li>
              <li>以旧换新</li>
              <li>众测活动</li>
              <li>企业购</li>
              <li>020采购</li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt>售后服务</dt>
          <dd>
            <ul>
              <li>门店维修</li>
              <li>保修政策</li>
              <li>防伪查询</li>
              <li>退换货政策</li>
              <li>手机寄修服务</li>
              <li>维修备件价格查询</li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt>维修与技术支持</dt>
          <dd>
            <ul>
              <li>服务店</li>
              <li>预约维修</li>
              <li>手机寄修</li>
              <li>备件价格查询</li>
              <li>上门服务</li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt>特色服务</dt>
          <dd>
            <ul>
              <li>防伪查询</li>
              <li>补购保障</li>
              <li>以旧换新</li>
              <li>礼品包装</li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt>关于我们</dt>
          <dd>
            <ul>
              <li>公司介绍</li>
              <li>华为零售店</li>
              <li>商家中心</li>
              <li>意见反馈</li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt>友情链接</dt>
          <dd>
            <ul>
              <li>华为集团</li>
              <li>华为消费者业务</li>
              <li>华为云</li>
              <li>华为应用市场</li>
              <li>华为心声社区</li>
            </ul>
          </dd>
        </dl>
      </div>
      <div class="foot_service_right">
        <div class="phone_num">
          <h3>950805</h3>
          <p style="font-size: 13px;">7x24 小时客服热线（仅收市话费）</p>
        </div>
        <div class="online_sev">
          <span class="iconfont">&#xe60f;</span>
          <span>在线客服</span>
        </div>
        <div class="foucse_wei"><span>关注VMALL：</span>
          <img src="./img/iShot_2022-11-14_23.57.20.png" alt=""><img src="./img/iShot_2022-11-14_23.58.44.png"
            alt=""><img src="./img/iShot_2022-11-14_23.59.25.png" alt=""><img src="./img/iShot_2022-11-14_23.59.50.png"
            alt=""></div>
      </div>
    </div>



    <div class="footer-warrant w">
      <p class="footer-warrant-logo ">
        <a href="https://www.vmall.com"><img
            src="https://res.vmallres.com/pimages//pages/cdnImages/33223073294617032233.png" title="华为商城"></a>
      </p>
      <div class="fl">
        <ul class="footer-warrant-link">
          <li>
            <a href="https://www.huawei.com/cn/">华为集团</a>
          </li>
          <li>
            <a href="https://consumer.huawei.com/cn/">华为CBG官网</a>
          </li>
          <li>
            <a href="https://appgallery.huawei.com/">华为应用市场</a>
          </li>
          <li>
            <a href="https://www.harmonyos.com/">HarmonyOS</a>
          </li>
          <li>
            <a href="https://cloud.huawei.com">华为终端云空间</a>
          </li>
          <li>
            <a href="https://developer.huawei.com/cn/">开发者联盟</a>
          </li>
          <li>
            <a href="https://m.vmall.com/app/open?type=1">华为商城手机版</a>
          </li>
        </ul><a
          href="https://privacy.consumer.huawei.com/legal/vmall/privacy-statement.htm?code=CN&amp;branchid=0&amp;language=zh-cn&amp;contenttag=default"
          rel="nofollow" target="_blank" title="隐私声明">隐私声明</a> <a
          href="https://privacy.consumer.huawei.com/legal/vmall/terms.htm?code=CN&amp;branchid=0&amp;language=zh-cn&amp;contenttag=default"
          rel="nofollow" target="_blank" title="服务协议">服务协议</a>
        <a href="https://www.vmall.com/portal/activity/index.html?pn=cookies" rel="nofollow" target="_blank"
          title="COOKIES">COOKIES</a> Copyright © 2012-<span id="j-copyrightyear">2022</span> 华为终端有限公司 版权所有 <a
          href="https://www.vmall.com/notice-17426" target="_blank">| 经营资质 |</a><a href="https://beian.miit.gov.cn/"
          target="_blank"> 粤ICP备19015064号</a><em>|</em><a
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44190002003939" target="_blank">粤公网安备
          44190002003939号</a><br><a target="_blank"
          href="https://res.vmallres.com/pimages//pages/cdnImages/40227551365615572204.png">增值电信业务经营许可证：粤B2-20190762<em>|</em></a><a
          target="_blank" href="https://wxdxsba.miit.gov.cn/serviceAction.action">备案主体编号：44201919072182</a><em>|</em><a
          target="_blank"
          href="https://res.vmallres.com/pimages//pages/cdnImages/91133651365615633119.pdf">粤新出网备（2021）2号<em>|</em></a><a
          target="_blank"
          href="https://res.vmallres.com/pimages//pages/cdnImages/58220651365615602285.png">（粤）网械平台备字[2022]第00005号<br></a><a
          target="_blank"
          href="https://res.vmallres.com/pimages//pages/cdnImages/17308188080618180371.jpg">互联网药品信息服务资格证（粤）-非经营性-2020-0102</a>
        | <a target="_blank"
          href="https://res.vmallres.com/pimages//pages/cdnImages/29005784435618750092.pdf">粤东食药监械经营备20203930</a> | <a
          target="_blank"
          href="https://res.vmallres.com/pimages//pages/cdnImages/42579551365615597524.png">广东省网络食品交易第三方平台备案：GDWS10168</a>
      </div>
      <p class="fr footer-warrant-img">
        <a class="fl" href="https://res3.vmallres.com/shopdc/pic/5a818c14-f886-41b6-ad48-56c94a430471.jpg"
          target="_blank"><img alt="电子营业执照" style="height:32px"
            src="https://res.vmallres.com/pimages/template/content/2016/20160226162415360.png" title="电子营业执照"> </a>
      </p>
    </div>



  </footer>
</body>

</html>
<script src="./js/axios.min.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    loop: true,
    autoplay: {
      delay: 2500,
      stopOnLastSlide: false,
      disableOnInteraction: true,
    },

  });
</script>

<script>
  var iconJs = document.querySelector('.icon_shoushuo');
  var searchFirst = document.querySelector('.Search_module');
  var searchSecond = document.querySelector('.Search_module_New');
  var swiperContainer = document.querySelector('.Search_New');
  iconJs.onclick = function () {
    searchFirst.style.display = 'none';
    searchSecond.style.display = 'flex';
  }
  swiperContainer.onclick = function () {
    searchFirst.style.display = 'flex';
    searchSecond.style.display = 'none';
  }

  let AD_img = document.querySelector('.AD_img')
  let off = document.querySelector('.off')
  off.onclick = function () {
    AD_img.style.display = 'none';
  }
</script>